<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><i
          class="iconfont icon-r-find"
          style="margin: 5px; font-size: 22px"
      >
        停泊车辆查询</i></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
              placeholder="车牌号"
              v-model="queryInfo.card"
              clearable
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-input
              placeholder="用户"
              v-model="queryInfo.nike"
              clearable
          ></el-input>
        </el-col>
        <el-col :span="3">
          <el-button
              type="primary"
              style="font-size: 18px"
              @click="getList"
          ><i class="iconfont icon-r-find" style="font-size: 22px;"></i> 搜索
          </el-button
          >
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="cars" border stripe>
        <el-table-column
            width="50"
            label="序号"
            align="center"
            type="index"
        ></el-table-column>
        <el-table-column label="用户" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.nike }}
          </template>
        </el-table-column>
        <el-table-column label="车牌号" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.card }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.phone }}
          </template>
        </el-table-column>
        <el-table-column
            label="停车地点"
            prop="stallArea"
            align="center"
        ></el-table-column>
        <el-table-column
            label="停车车位"
            prop="stallNum"
            align="center"
        ></el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "StallMane",
  data() {
    return {
      total: 0,
      loading: true,
      queryInfo: {
        nike: "",
        card: "",
        pagenum: 1,
        pageSize: 5,
      },
      cars: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = false
      axios.get("/api/car/getCars", {
        params: this.queryInfo
      }).then((res) => {
        console.log(res)
        this.total = res.data.data.total;
        this.cars = res.data.data.records;
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
